import React, { Component } from 'react'

class Box extends Component{
    shouldComponentUpdate( nextState) { 
        if(this.props.current===this.props.index||nextState.current===nextState.index){
            return true
        }
        return false
     }
    render(){
        let {current,index}=this.props
        console.log("render");
        return(
            <div style={{width:"100px",height:"100px",border:current===index?'1px solid red':"1px solid grey",margin:"10px",float:'left'}}> 
            </div>
        )
    }
}
export default class App extends Component {
    state={
        list:["111","222","333","444","555","666","777","888","999","000"],
        current:0
    }
  render() {
    return (
      <div>
        <div style={{overflow:"hidden"}}>
            <input type="number" onChange={(e)=>{
                this.setState({
                    current:Number(e.target.value)
                })
            }}/>
        </div>
        {
            this.state.list.map((item,index)=>
            <Box key={item} index={index} current={this.state.current}></Box>
            )
        }
      </div>
    )
  }
}
